<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="85px">
            <el-form-item label="园所性质" prop="type">
             <el-select v-model="queryParams.type" placeholder="请选择园所性质" clearable size="small">
               <el-option v-for="dict in schoolTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
             </el-select>
             </el-form-item>
             <el-form-item label="地区类型" prop="nature">
               <el-select v-model="queryParams.nature" placeholder="请选择地区类型" clearable size="small">
                 <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
               </el-select>
             </el-form-item>
             <el-form-item label="学期" prop="semId">
                <el-select  v-model="queryParams.semId" filterable clearable multiple collapse-tags placeholder="请选择学期" style="width: 300px;" >
                  <el-option
                    v-for="item in semsterList"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                    size="small">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                 <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                 <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
               </el-form-item>
      </el-form>
      <div class="echart" >
         <div class="abnormalChart" ref="abnormalChart"></div>
      </div>
    </div>
</template>

<script>

import moment from "moment";
import { selectSemster} from "@/api/base/semster";
export default {
  name: "qyyeysmx",
  data() {
    return {
        queryParams:{
            type:'',
            nature:'',
            semId:''
        },
        abnormalChart:null,
        abnormalList:[
            {name:'园所1',thinnish:'20',fat:'20',weight:'20',thinnishlv:'0.5',fatlv:'0.2',weightlv:'0.2', },
            {name:'园所1',thinnish:'20',fat:'20',weight:'20',thinnishlv:'1.5', fatlv:'0.3',weightlv:'0.8', },
            {name:'园所1',thinnish:'20',fat:'20',weight:'20',thinnishlv:'1.8', fatlv:'0.2',weightlv:'0.2', },
            {name:'园所1',thinnish:'20',fat:'20',weight:'20',thinnishlv:'1.8', fatlv:'0.6',weightlv:'0.4', },
        ],
        // 学期数据
        semsterList: [],
        schoolTypeOptions:[],
        schoolNatureOptions:[]
    };
  },
  created() {
       this.getDicts("park_type").then(response => {
          this.schoolTypeOptions = response.data;
        });
       this.getDicts("school_nature").then(response => {
          this.schoolNatureOptions = response.data;
       });
       selectSemster({'status':1}).then(response => {
         this.semsterList = response.rows;
        //  this.semsterList.map((item,index)=>{
        //     if(index<6){
        //         this.queryParams.semId.push(item.id)
        //     }
        //  })
        //  console.log( this.semsterList);
       });

  },
  mounted(){
        // this.getList()
        this.abnormalChart = this.$echarts.init(this.$refs.abnormalChart);
        this.abnormalChartFn();
   },
  methods: {

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams= {
        pageNum: 1,
        pageSize: 10,
        name:'',
        schoolCode:'',
        classId:'',
      },
      this.dateTtime=new Date();
      this.resetForm("queryForm");
      this.handleQuery();
    },
     abnormalChartFn(){
          const option = {
         // backgroud:'#333',
         title: {
           text: '幼儿身高体重异常数据统计',
          //  subtext: '纯属虚构',
           left: 'left'
         },
         dataZoom:{
           bottom:0,
           show:12/this.abnormalList.length<1,
           // show:true,
           type:'slider',
           zoomLock:true,
           brushSelect:false,
           height:8,
           // backgroundColor:'#000000',
           handleSize:'0',
           // moveHandleSize:1,
           // moveHandleStyle:{
           //   borderType:'dotted'
           // },
           sow:true,
           xAxisIndex:[0],
           start:0,
           end:12/this.abnormalList.length*100
         },
         tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              }
          },
          legend: {
            selectedMode: 'single',
            top:0,
              left:'right',
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               rotate:30,
               interval: 0,//使x轴文字显示全
              },
              data: this.abnormalList.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value'
              }
          ],
          color:['#5ab1ef','#2ec7c9',],
          series: [
              {
                  name: '偏瘦',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'45%',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.abnormalList.map(item=>item.thinnish)
              },
              {
                  name: '偏瘦',
                  type: 'line',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  lineStyle: { // 设置线条的style等
                     normal: {
                     color: '#ffb980', // 折线线条颜色:红色
                    },
                  },
                  barWidth:'45%',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.abnormalList.map(item=>item.thinnishlv)
              },
              {
                  name: '超重',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.abnormalList.map(item=>item.weight),
              },
              {
                  name: '超重',
                  type: 'line',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  lineStyle: { // 设置线条的style等
                     normal: {
                     color: '#ff9e9e', // 折线线条颜色:红色
                    },
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.abnormalList.map(item=>item.weightlv),
              },
              {
                  name: '肥胖',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.abnormalList.map(item=>item.fat),
              },
              {
                  name: '肥胖',
                  type: 'line',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  lineStyle: { // 设置线条的style等
                     normal: {
                     color: '#ffb980', // 折线线条颜色:红色
                    },
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.abnormalList.map(item=>item.fatlv),
              },

          ]
          }
            // 使用刚指定的配置项和数据显示图表
            this.abnormalChart.setOption(option,true);
            window.addEventListener("resize", this.monitorResize);
      },
     //地图监听窗口缩放事件
     monitorResize(){
        this.abnormalChart.resize();
      },

  }
};
</script>

<style lang="scss" scoped>
.echart{
    width:100%;
    // height: 700px;
        .abnormalChart{
            margin-top: 50px;
            width: 100%;
            height: 500px;

    }
}
</style>
